只有統計數字還不夠。如果使用者想知道哪些資料有問題、問題出在哪個欄位，以及應該如何處理，就需要進一步查看詳細的檢查結果。
因此，今天的目標是改善資料品質問題明細的呈現方式，讓每個問題都能以獨立的區塊顯示，並利用不同的顏色區分問題類型。
一、建立問題明細的CSS樣式
首先，使用 CSS 設定問題明細的外觀，包含背景、邊框、間距與圓角，讓問題清單更容易閱讀。

.issue-list {
    background: white;
    border: 1px solid #dce5e2;
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0 28px;
}
.issue-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #f8fbfa;
    border-radius: 6px;
    line-height: 1.6;
}

其中，.issue-list是整個問題清單的容器，而.issue-item則代表單一問題。透過display: flex，可以讓問題類型標籤與詳細內容排列在同一列。
二、使用顏色區分不同問題類型

.issue-missing {
    border-left-color: #b87a32;
}
.issue-format {
    border-left-color: #b65e5e;
}
.issue-range {
    border-left-color: #a75b72;
}
.issue-duplicate {
    border-left-color: #7d6bb1;
}
.issue-consistency {
    border-left-color: #4c8b80;
}

這樣可以讓使用者不必逐字閱讀所有內容，就能透過顏色快速區分缺失值、格式錯誤、數值異常、重複資料與一致性問題。
三、使用PHP輸出問題明細
以下以數值異常為例：

echo '<div class="issue-item issue-range">';
echo '<span class="issue-tag">數值異常</span>';
echo '<span class="issue-detail">'
    . htmlspecialchars($row[0], ENT_QUOTES, 'UTF-8')
    . ' → age = '
    . htmlspecialchars($row[1], ENT_QUOTES, 'UTF-8')
    . ' → 建議處理：標記為 Unknown';
echo '</span></div>';

這段程式碼會顯示問題類型、資料識別碼、異常欄位與處理建議。
另外，使用htmlspecialchars()對資料內容進行HTML特殊字元轉換，降低資料被瀏覽器當成HTML標籤解讀的風險。